<template>
  <el-card>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0; z-index: 20; top: 8px"
      @click="deletePanelItem"
    />
    <GanttTemplate
      class="left-container h-full"
      :scaleTime="scaleTime"
      :tasks="tasks"
      :columns="columns"
      ganttId="gantt_here1"
      key="gantt_here1"
      :showSearch="false"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import dayjs from "dayjs";
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const scaleTime = ref("day");
const columns = ref([
  {
    name: "text",
    label: "订单/工序",
    tree: true,
    width: 180,
  },
  { name: "add", label: "", width: 44, align: "center" },
  { name: "total", width: 44, label: "数量", align: "center" },
  { name: "done", width: 44, label: "已排", align: "center" },
  {
    name: "start_date",
    label: "开始",
    width: 60,
    align: "center",
    template(task: any) {
      return dayjs(task.start_date).format("MM-DD");
    },
  },
  {
    name: "end_date",
    label: "结束",
    width: 60,
    align: "center",
    template(task: any) {
      return dayjs(task.end_date).format("MM-DD");
    },
  },
]);
const tasks = ref({
  data: [
    {
      id: "10",
      text: "P2402100011订单001",
      start_date: "2025-01-07",
      duration: 3,
      done: 6,
      order: 10,
      progress: 0.4,
      total: 10,
      open: true,
    },
    {
      id: 134,
      text: "A01 拉丝",
      start_date: "2025-01-03",
      render: "split",
      parent: "10",
      progress: 0.5,
      total: 10,
      done: 6,
      open: true,
      duration: 11,
    },
    {
      id: 170,
      text: "Stage #1",
      start_date: "2025-01-03",
      duration: 1,
      parent: "134",
      progress: 0,
      open: true,
    },
    {
      id: 180,
      text: "Stage #2",
      start_date: "2025-01-05",
      duration: 1,
      parent: "134",
      progress: 0,
      open: true,
    },
    {
      id: 190,
      text: "Stage #3",
      start_date: "2025-01-08",
      duration: 1,
      parent: "134",
      progress: 0,
      open: true,
    },
    {
      id: 200,
      text: "Stage #4",
      start_date: "2025-01-10",
      duration: 2,
      parent: "134",
      progress: 0,
      open: true,
    },
    {
      id: "1",
      text: "A01 拉丝",
      start_date: "2025-01-06",
      duration: 2,
      order: 10,
      total: 2,
      done: 2,
      progress: 0.6,
      parent: "10",
    },
    {
      id: "3",
      text: "A02 退火",
      start_date: "2025-01-05",
      duration: 2,
      order: 20,
      done: 2,
      progress: 0.6,
      total: 2,
      parent: "10",
    },
    {
      id: "4",
      text: "A03 纹合",
      start_date: "2025-01-05",
      duration: 2,
      order: 20,
      done: 2,
      total: 6,
      progress: 0.6,
      parent: "10",
    },
    {
      id: "20",
      text: "P2402100022订单002",
      start_date: "2025-01-03",
      duration: 3,
      order: 10,
      progress: 0.4,
      done: 5,
      total: 6,
      type: "project",
      open: true,
    },
    {
      id: "13",
      text: "A04 挤出",
      start_date: "2025-01-03",
      duration: 2,
      order: 10,
      done: 2,
      progress: 0.6,
      total: 2,
      parent: "20",
    },
    {
      id: "15",
      text: "A05 成缆",
      start_date: "2025-01-03",
      duration: 2,
      order: 20,
      done: 0,
      progress: 0.6,
      total: 1,
      parent: "20",
    },
    {
      id: "14",
      text: "A06 成品检",
      start_date: "2025-01-03",
      duration: 2,
      order: 20,
      total: 1,
      done: 1,
      progress: 0.6,
      parent: "20",
    },
    {
      id: "2",
      text: "A01 拉丝",
      start_date: "2025-01-05",
      duration: 2,
      order: 20,
      done: 2,
      total: 2,
      progress: 0.6,
      parent: "20",
    },
    {
      id: "7",
      text: "A03 纹合",
      start_date: "2025-01-05",
      duration: 2,
      order: 20,
      done: 1,
      total: 1,
      progress: 0.4,
      parent: "10",
    },
    // 模拟数据
    {
      id: "110",
      text: "P2402100011订单001",
      start_date: "2025-01-07",
      duration: 3,
      done: 6,
      order: 10,
      progress: 0.4,
      total: 10,
      open: true,
    },
    {
      id: "411",
      text: "A03 纹合",
      start_date: "2025-01-05",
      duration: 2,
      order: 20,
      done: 2,
      total: 6,
      progress: 0.6,
      parent: "10",
    },
    // {
    //   id: "201",
    //   text: "P2402100022订单002",
    //   start_date: "2025-01-03",
    //   duration: 3,
    //   order: 10,
    //   progress: 0.4,
    //   done: 5,
    //   total: 6,
    //   type: "project",
    //   open: true,
    // },
    // {
    //   id: "131",
    //   text: "A04 挤出",
    //   start_date: "2025-01-03",
    //   duration: 2,
    //   order: 10,
    //   done: 2,
    //   progress: 0.6,
    //   total: 2,
    //   parent: "20",
    // },
    // {
    //   id: "151",
    //   text: "A05 成缆",
    //   start_date: "2025-01-03",
    //   duration: 2,
    //   order: 20,
    //   done: 0,
    //   progress: 0.6,
    //   total: 1,
    //   parent: "20",
    // },
    // {
    //   id: "141",
    //   text: "A06 成品检",
    //   start_date: "2025-01-03",
    //   duration: 2,
    //   order: 20,
    //   total: 1,
    //   done: 1,
    //   progress: 0.6,
    //   parent: "20",
    // },
    // {
    //   id: "21",
    //   text: "A01 拉丝",
    //   start_date: "2025-01-05",
    //   duration: 2,
    //   order: 20,
    //   done: 2,
    //   total: 2,
    //   progress: 0.6,
    //   parent: "20",
    // },
    // {
    //   id: "711",
    //   text: "A03 纹合",
    //   start_date: "2025-01-05",
    //   duration: 2,
    //   order: 20,
    //   done: 1,
    //   total: 1,
    //   progress: 0.4,
    //   parent: "10",
    // },
  ],
  links: [
    { id: 1, source: 1, target: 2, type: "0" },
    { id: 2, source: 2, target: 3, type: "0" },
    { id: 3, source: 3, target: 4, type: "0" },
    { id: 4, source: 2, target: 5, type: "0" },
  ],
});

onMounted(() => {});
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  color: lightslategrey;
}
:deep(.el-card__body) {
  height: 100% !important;
  padding: 0 !important;
  position: relative;
}
:deep(.el-card__header) {
  padding: 10px;
}

.echarts {
  width: 100%;
  height: calc(100% - 45px);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
  padding: 15px;
}
</style>
